<template>
    <div class="recharge-title">{{ $t('game_recharge') }}</div>
    <div class="recharge-content">
        <div class="main">
            <div class="main_item">
                <p>{{selectedGameTip}}：</p>
                <el-select size="small" class="select" v-model="selectedGame" @change="select_game">
                    <el-option
                        v-for="item in game_list"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>

            <div class="main_item">
                <p>{{selectedServicesTip}}：</p>
                <el-select size="small" class="select" v-model="selectedServices" @change="select_Services">
                    <el-option
                        v-for="item in servicesList"
                        :key="item.id"
                        :label="item.service_name"
                        :value="item.service_id"
                    >
                    </el-option>
                </el-select>
            </div>

            <div class="main_item">
                <p>{{selectedRoleTip}}：</p>
                <el-select size="small" class="select" v-model="selectedRole">
                    <el-option
                        v-for="item in roleList"
                        :key="item.id"
                        :label="item.role_name"
                        :value="item.role_id"
                    >
                    </el-option>
                </el-select>
            </div>
        </div>


        <div>
            <div>
                <div class="recharge-content-title">{{ $t('recharge_money') }} 
                    <span>{{ $t('recharge_tip') }}</span>
                </div>
                
                <div class="pay-rechange-panel-box">
                    <div class="pay-rechange-item" v-if="Number(selectedGame).toString() != 'NaN'" v-for="item,index in chargeList" :key="item.id" @click="select_price(item.id,item.currency,index,item.amount,item.sku)"
                        :class="{ 'pay-rechange-item-selected': select_item == index }">
                        <div class="pay-rechange-item-num">
                            <div class="pay-rechange-item-num-title-1">{{item.price}} Y {{ $t('coin') }}</div>
                        </div>
                        <div class="pay-rechange-item-bottom">{{ $t('price') }} ${{ item.amount }}</div>
                        <p class="bef" v-if="item.give > 0">{{ $t('give') }} {{item.give}} Y {{ $t('coin') }}</p>
                    </div>
                    <el-empty v-if="Number(selectedGame).toString() == 'NaN'" :description="$t('selectGameTip')" />
                </div>
            </div>

            <div class="recharge-content-title" v-if="pay_type !== 'platform'">
                {{ $t('coupon') }} 
                <p @click="isCoupon = true" v-if="lang == 'en'">
                    <span class="coupon_text" v-if="now_coupon_type == 1 && coupon_text != ''">{{coupon_text}}</span> 
                    <span class="coupon_text" v-if="now_coupon_type == 2 && coupon_text != ''">{{coupon_text * 10}} off </span>  
                    <span class="coupon_text">{{ $t('coupon_text') }}</span> &nbsp;
                    <span v-if="coupon_text == ''" class="coupon_text">{{ $t('choice_tip') }}</span>
                    <svg t="1725605194184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5817" width="13" height="13"><path d="M782.8 511.1 351.9 942c-22.8 22.8-59.8 22.8-82.6 0-22.8-22.8-22.8-59.8 0-82.6L617.5 511.1 269.2 162.8c-22.8-22.8-22.8-59.8 0-82.6 22.8-22.8 59.8-22.8 82.6 0L782.8 511.1 782.8 511.1zM782.8 511.1" p-id="5818" fill="#ff0000"></path></svg>
                </p>

                <p @click="isCoupon = true" v-if="lang == 'zh'">
                    <span class="coupon_text" v-if="now_coupon_type == 1 && coupon_text != ''">{{coupon_text}}</span> 
                    <span class="coupon_text" v-if="now_coupon_type == 2 && coupon_text != ''">{{coupon_text * 10}}折</span> 
                    <span class="coupon_text" v-if="coupon_text == ''">{{ $t('choice_tip') }} </span> 
                    {{ $t('coupon_text') }}
                    <svg t="1725605194184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5817" width="13" height="13"><path d="M782.8 511.1 351.9 942c-22.8 22.8-59.8 22.8-82.6 0-22.8-22.8-22.8-59.8 0-82.6L617.5 511.1 269.2 162.8c-22.8-22.8-22.8-59.8 0-82.6 22.8-22.8 59.8-22.8 82.6 0L782.8 511.1 782.8 511.1zM782.8 511.1" p-id="5818" fill="#ff0000"></path></svg>
                </p>
            </div>

            <div class="recharge-content-title">{{ $t('recharge_type') }} <br v-if="lang == 'en'"/><span>{{ $t('recharge_msg') }}</span></div>
            <div class="saveChoose-btn">
                <span>{{ $t('choice') }}：</span>
                <div class="select-wrapper">
                    <el-select v-model="selectedCountry" placeholder="Select" size="default" style="width: 110px" @change="handleChange">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                    <div class="arrow"></div>
                </div>
                <div class="saveChoose-middle">
                    <ul class="data_pay_method">

                        <li data-href="card" :class="{'active':active_item == index}" v-for="item,index in pay_list" @click="setPayInfo(item.type,index)">
                            <img class="save-logo" :src="item.img_url" alt="">
                            <div class="middle-text ">
                                <!-- <div class="add appear">加贈</div> -->
                                <div class="name">{{item.pay_name}}</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="saveConfirm">
                    <!-- 平台储值 -->
                    <button v-if="now_coupon_type == 1 && payment !='platform'" @click="goClientPay_platform">{{ $t('Confirm_payment') }} ${{ coupon_text=='' ? select_amount : (select_amount-coupon_text < 0 ? 0 : (select_amount-coupon_text).toFixed(2))}}</button>
                    <button v-if="now_coupon_type == 2 && payment !='platform'" @click="goClientPay_platform">{{ $t('Confirm_payment') }} ${{ coupon_text=='' ? select_amount : (select_amount * coupon_text).toFixed(2)}}</button>
                    <button v-if="payment =='platform'" @click="goClientPay_platform">{{ $t('Confirm_payment') }} ${{ select_amount }}</button>
                </div>
            </div>
        </div>

        <div v-if="lang == 'zh'">
            <BindAccount :visible="visible" :handleClose='handleClose' :getUserInfo="getUserInfo" :fb_bind_show="fb_bind_show"/>
            <Dialog :title="'請確認付款'" :title2="'支付成功可在儲值記錄中查看'" :cancel_title="'還未支付'" :sub_title="'已完成支付'" :visible="dialog_show" :handleClose='paySubmit' :paySubmit="paySubmit"/>
            <Dialog :title="'faceBook绑定'" :title2="'faceBook是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_fb_bind" :handleClose='fb_bind_com' :paySubmit="fb_bind_com"/>
            
        </div>

        <div v-if="lang == 'en'">
            <BindAccount :visible="visible" :handleClose='handleClose' :getUserInfo="getUserInfo" :fb_bind_show="fb_bind_show"/>
            <Dialog :title="'Please confirm payment'" :title2="'Payment success can be viewed in the stored value record'" :cancel_title="'Not yet paid'" :sub_title="'Payment completed'" :visible="dialog_show" :handleClose='paySubmit' :paySubmit="paySubmit"/>
            <Dialog :title="'Facebook binding'" :title2="'Is Facebook successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_fb_bind" :handleClose='fb_bind_com' :paySubmit="fb_bind_com"/>
            
        </div>

        <div class="coupon_black" v-show="isCoupon" @click="isCoupon = false"></div>
        <div  :class="{'open':isCoupon,'coupon_width':lang == 'en'}" class="coupon">
            
            <div class="close" @click="isCoupon = false;selectedRadio = '';coupon_text=''"></div>
            <div class="recharge_title">{{ $t('my_coupon') }}</div>
            <el-empty :description="$t('no_coupon')" v-if="coupon_list.length == 0"/>
            <div class="item_box">
                <!-- 平台优惠券充值 -->
                <div class="item" v-for="item in coupon_list" :key="item.id" :class="{'coupon_notUse':select_amount < item.max_money}">
                    <div style="width: 103px;">
                        <p v-if="item.coupon_type == 1">${{ item.coupon_money }}</p>
                        <p v-if="item.coupon_type == 2">{{ item.coupon_money * 10 }}折</p>
                        <h4 v-if="lang == 'zh' && item.max_money != 0">滿{{item.max_money}}可用</h4>
                        <h4 v-if="lang == 'en' && item.max_money != 0">{{$t('coupon_tip')}} {{item.max_money}}</h4>

                        <h4 v-if="item.max_money == 0">{{$t('No_threshold')}}</h4>
                    </div>
                    <div v-if="item.coupon_type == 1" >{{$t('use_coupon_tip')}} <span style="color: red;font-weight: bold;">${{ item.coupon_money }}</span></div>
                    <div v-if="item.coupon_type == 2">{{$t('use_coupon_tip')}} <span style="color: red;font-weight: bold;">${{ (select_amount - (select_amount * item.coupon_money)).toFixed(2)  }}</span></div>
                    <div>
                        <el-radio-group v-model="selectedRadio">
                            <el-radio :value="item.id" size="large"></el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <button class="button" @click="use_coupon" v-if="coupon_list.length !== 0" :class="{'coupon_notUse':!selectedRadio}">{{ $t('confirm') }}</button>
        </div>
    </div>
</template>
  
<script setup>
import axios from '@/utils/api'
import { useUserInfoStore } from '@/store/modules/user_info/index';
import Dialog from "@/components/Dialog/index.vue"
import BindAccount from "@/components/UserCenter/bindAccount/index.vue"
const user_infoStore = useUserInfoStore();
let user_info = reactive(user_infoStore.userInfo)
const userid = user_infoStore.userInfo.id







let select_item = ref(0)
let selectedCountry = ref('港澳台');
let order_type = ref(1) //1游戏 2平台
let active_item = ref(0)
let pay_url = ref('')
let sku = ref('')
const select_amount = ref(0)
const now_coupon_max = ref('')
let currency = ref('')
const select_price = (id,currency1,index,amount,skuVal) =>{
    console.log(id,index,amount,sku);
    select_item.value = index
    sku.value = skuVal
    currency.value = currency1
    select_amount.value = amount

    if(amount < now_coupon_max.value){
        coupon_text.value = ''
        selectedRadio.value = ''
    }
}

const isCoupon = ref(false)
const selectedRadio = ref('')
const coupon_text = ref('')
const coupon_id = ref('')
const now_coupon_type = ref(1)

const use_coupon = ()=>{
    console.log(selectedRadio.value,coupon_list);
    
    const couponValue = coupon_list.value.find(item => item.id === selectedRadio.value);
    coupon_text.value = couponValue.coupon_money
    now_coupon_max.value = couponValue.max_money
    // coupon_id.value = selectedRadio.value
    coupon_id.value = couponValue.coupon_id
    isCoupon.value = false
    now_coupon_type.value = couponValue.coupon_type
}


const coupon_list = ref([])
const getCouponList = async () =>{
    const list = await axios.get(`/coupon_list?user_id=${userid}&status=1&use_scope=1`)
    coupon_list.value = list.data
    
}

getCouponList()

let dialog_show = ref(false)
const dialog_hide = () => {
    dialog_show.value = false
}

const visible = ref(false)
const handleClose = () => {
    visible.value = false
};

const paySubmit = ()=>{
    // console.log('完成支付');
    getUserInfo()
    getCouponList()
    coupon_text.value = ''
    selectedRadio.value = ''
    dialog_hide()
    if(user_info.status == 0){
        visible.value = true
    }
}

let dialog_fb_bind = ref(false)
const fb_bind_show = ()=>{
    dialog_fb_bind.value = true
}
const fb_bind_com = ()=>{
    getUserInfo()
    dialog_fb_bind.value = false
}

let payment = ref('')
let pay_type = ref('')
const setPayInfo = (type,index)=>{
    active_item.value = index || 0
    pay_type.value = type
    
    resetUrl()
    // if(isHomeRech.value == undefined){ //判断是否是游戏充值
    //     pay_url.value += "ugamepay/index?game_id="+pay_info.value.gameId+"&server_id="+pay_info.value.serverId+"&role_id="+pay_info.value.roleId+"&c_text="+pay_info.value.cText+"&user_id="+pay_info.value.userId+"&cp_order_id="+pay_info.value.cp_orderId+"&sku="+pay_info.value.sku+"&payment="+type+"&type=2&order_type="+order_type.value
    // }
    payment.value = type
    console.log(pay_url.value);
}
const resetUrl = () => {
    if(window.baseUrl == "http://192.168.110.244:8081/game/public"){ //判断是否本地或测试服
        pay_url.value = "http://192.168.110.244:8081/game/public/index.php/pay/"
    }else{
        pay_url.value = window.baseUrl+"/index.php/pay/"
    }
}

const userInfo = reactive([])
const getUserInfo = async () =>{
    const data = {
        user_id:userid
    }
    const list = await axios.post('/getUserInfo',data)
    Object.assign(userInfo,list.data)
    // console.log(userInfo,'userInfo');
    user_infoStore.setUserinfo(list.data.user_info)
}

//合并全球支付方式pay_list并去重
const mergeAndRemoveDuplicates = (...lists) => {
    const combined = lists.flat();
    const seen = new Set();
    return combined.filter(item => {
        const duplicate = seen.has(item.type);
        seen.add(item.type);
        return !duplicate;
    });
};

let options = []
const lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
    options = [
        {
        value: 'Hong Kong,Macau,Taiwan',
        label: 'Hong Kong,Macau,Taiwan',
        },
        {
        value: 'Malaysia',
        label: 'Malaysia',
        },
        {
        value: 'Singapore',
        label: 'Singapore',
        },
        {
        value: 'Global',
        label: 'Global',
        },
    ];
}else{
    lang.value = 'zh'
    options = [
        {
            value: '港澳台',
            label: '港澳台',
        },
        {
            value: '馬來西亞',
            label: '馬來西亞',
        },
        {
            value: '新加坡',
            label: '新加坡',
        },
        {
            value: '全球',
            label: '全球',
        },
    ]
}

const handleChange = () => {
    console.log(selectedCountry.value);
    
    if(localStorage.getItem('lang') == 'en'){
        switch (selectedCountry.value) {
            case 'Hong Kong,Macau,Taiwan':
                pay_list.value = pay_list_HMT;
                setPayInfo('linepay');
                break;
            case 'Malaysia':
                pay_list.value = pay_list_Malaysia;
                setPayInfo('paypal');
                break;
            case 'Singapore':
                pay_list.value = pay_list_Singapore;
                setPayInfo('card');
                break;
            default:
                selectedCountry.value = 'Global';
                pay_list.value = mergeAndRemoveDuplicates(pay_list_Singapore,pay_list_HMT, pay_list_Malaysia);
                setPayInfo('card');
                break;
        }
    }else{
        switch (selectedCountry.value) {
            case '港澳台':
                selectedCountry.value = '港澳台';
                pay_list.value = pay_list_HMT
                setPayInfo('linepay')
                break;
            case '港澳台':
                selectedCountry.value = '港澳台';
                pay_list.value = pay_list_HMT
                setPayInfo('linepay')
                break;
            case '港澳台':
                selectedCountry.value = '港澳台';
                pay_list.value = pay_list_HMT
                setPayInfo('linepay')
                break;
            case '馬來西亞':
                selectedCountry.value = '馬來西亞';
                pay_list.value = pay_list_Malaysia
                setPayInfo('paypal')
                break;
            case '新加坡':
                selectedCountry.value = '新加坡';
                pay_list.value = pay_list_Singapore
                setPayInfo('card')
                break;
            default:
                selectedCountry.value = '全球';
                pay_list.value = mergeAndRemoveDuplicates(pay_list_HMT, pay_list_Singapore, pay_list_Malaysia);
                setPayInfo('linepay')
                break;
        }
    }
    
    
};
let pay_list = ref([]);
let pay_list_HMT = []
let pay_list_Singapore = []
let pay_list_Malaysia = []
if(localStorage.getItem('lang') == 'en'){
    pay_list_HMT = [
        
        {
            pay_name:'Linepay',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_paypal_linepay.png',
            type:'linepay'
        },
        {
            pay_name:'MyCard',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_mycard.png',
            type:'mycard'
        },
        {
            pay_name:'Credit Card',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
            type:'card'
        },
        {
            pay_name:'Paypal',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
            type:'paypal'
        },
        {
            pay_name:'jkopay',
            img_url:'https://www.yyfuns.com/static/pay_icon/jkopay.png',
            type:'jkopay'
        },
        
        {
            pay_name:'Payme',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_payme.png',
            type:'payme'
        },
        // {
        // 	pay_name:'八達通',
        // 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_badatong.png',
        // 	type:'F7'
        // },
        // {
        // 	pay_name:'weChat',
        // 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_wechat.png',
        // 	type:'wetchat'
        // },
        {
            pay_name:'Alipay Hong Kong',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_alipay.png',
            type:'alipay_hk'
        },
    ]
    
    pay_list_Singapore = [
        {
            pay_name:'Credit Card',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
            type:'card'
        },
        {
            pay_name:'Paypal',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
            type:'paypal'
        },
        {
            pay_name:'Paynow',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paynow.png',
            type:'paynow'
        },
        // {
        // 	pay_name:'Grabpay',
        // 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
        // 	type:'GRABPAY'
        // },
    ]
    
    pay_list_Malaysia = [
        {
            pay_name:'Paypal',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
            type:'paypal'
        },
        {
            pay_name:'Touch’n Go',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_tng.png',
            type:'tng'
        },
        {
            pay_name:'FPX Net Banking',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_fpx.png',
            type:'fpx'
        },
        // {
        // 	pay_name:'Grabpay',
        // 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
        // 	type:'GRABPAY'
        // },
    ]
}else{
    pay_list_HMT = [
        {
            pay_name:'Linepay',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_paypal_linepay.png',
            type:'linepay'
        },
        {
            pay_name:'信用卡',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
            type:'card'
        },
        {
            pay_name:'MyCard',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_mycard.png',
            type:'mycard'
        },
        {
            pay_name:'街口支付',
            img_url:'https://www.yyfuns.com/static/pay_icon/jkopay.png',
            type:'jkopay'
        },
        {
            pay_name:'Paypal',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
            type:'paypal'
        },
        {
            pay_name:'Payme',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_payme.png',
            type:'payme'
        },
        // {
        // 	pay_name:'八達通',
        // 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_badatong.png',
        // 	type:'F7'
        // },
        // {
        // 	pay_name:'weChat',
        // 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_wechat.png',
        // 	type:'wetchat'
        // },
        {
            pay_name:'香港支付寶',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_alipay.png',
            type:'alipay_hk'
        },
    ]
    
    pay_list_Singapore = [
        {
            pay_name:'信用卡',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_visa.png',
            type:'card'
        },
        {
            pay_name:'Paypal',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
            type:'paypal'
        },
        {
            pay_name:'Paynow',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paynow.png',
            type:'paynow'
        },
        // {
        // 	pay_name:'Grabpay',
        // 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
        // 	type:'GRABPAY'
        // },
    ]
    
    pay_list_Malaysia = [
        {
            pay_name:'Paypal',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_paypal.png',
            type:'paypal'
        },
        {
            pay_name:'Touch’n Go',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_tng.png',
            type:'tng'
        },
        {
            pay_name:'FPX Net Banking',
            img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_fpx.png',
            type:'fpx'
        },
        // {
        // 	pay_name:'Grabpay',
        // 	img_url:'https://www.yyfuns.com/static/pay_icon/new_pay_gray_sig.png',
        // 	type:'GRABPAY'
        // },
    ]
}

//首次进入判断用户地区
if(localStorage.getItem('lang') == 'en'){
    switch (navigator.language) {
        case 'zh-TW':
            selectedCountry.value = 'Hong Kong,Macau,Taiwan';
            pay_list.value = pay_list_HMT
            setPayInfo('linepay')
            break;
        case 'zh-HK':
            selectedCountry.value = 'Hong Kong,Macau,Taiwan';
            pay_list.value = pay_list_HMT
            setPayInfo('linepay')
            break;
        case 'zh-MO':
            selectedCountry.value = 'Hong Kong,Macau,Taiwan';
            pay_list.value = pay_list_HMT
            setPayInfo('linepay')
            break;
        case 'ms-MY':
            selectedCountry.value = 'Malaysia';
            pay_list.value = pay_list_Malaysia
            setPayInfo('paypal')
            break;
        case 'en-SG':
            selectedCountry.value = 'Singapore';
            pay_list.value = pay_list_Singapore
            setPayInfo('card')
            break;
        default:
            selectedCountry.value = 'Global';
            pay_list.value = mergeAndRemoveDuplicates(pay_list_Singapore,pay_list_HMT, pay_list_Malaysia);
            setPayInfo('card')
            console.log(pay_list.value);
            
            break;
    }
}else{
    switch (navigator.language) {
        case 'zh-TW':
            selectedCountry.value = '港澳台';
            pay_list.value = pay_list_HMT
            setPayInfo('linepay')
            break;
        case 'zh-HK':
            selectedCountry.value = '港澳台';
            pay_list.value = pay_list_HMT
            setPayInfo('linepay')
            break;
        case 'zh-MO':
            selectedCountry.value = '港澳台';
            pay_list.value = pay_list_HMT
            setPayInfo('linepay')
            break;
        case 'ms-MY':
            selectedCountry.value = '馬來西亞';
            pay_list.value = pay_list_Malaysia
            setPayInfo('paypal')
            break;
        case 'en-SG':
            selectedCountry.value = '新加坡';
            pay_list.value = pay_list_Singapore
            setPayInfo('card')
            break;
        default:
            selectedCountry.value = '全球';
            pay_list.value = mergeAndRemoveDuplicates(pay_list_HMT, pay_list_Singapore, pay_list_Malaysia);
            setPayInfo('linepay')
            break;
    }
}

const isWeb = ()=>{
    if (typeof webkit !== 'undefined' || typeof AndroidInterface !== 'undefined') {
        return true;
    } else {
        return false;
    }
}

function isFacebookBrowser() {
    const ua = navigator.userAgent;
    return /FBAN|FBAV/i.test(ua);
}

const isDevice = ()=>{
    const userAgent = navigator.userAgent || window.opera;

    if(/iPhone|iPad|iPod/i.test(userAgent)){
        return 'ios'
    }else if(/Android/i.test(userAgent)){
        return 'android'
    }
}

const goClientPay_platform = ()=>{
    if(selectedServices.value == '選擇區服'){
        ElMessage.warning('請選擇區服')
        return
    }
    if(selectedRole.value == '選擇角色'){
        ElMessage.warning('請選擇角色')
        return
    }
    let couponUrl = ''
    if(selectedRadio.value){
        couponUrl = "&coupon_id="+coupon_id.value
    }


    resetUrl()
    pay_url.value += "ugamepay/index?game_id="+selectedGame.value+"&server_id="+selectedServices.value+"&role_id="+selectedRole.value+"&c_text=&user_id="+userid+"&cp_order_id=1&sku="+sku.value+"&payment="+payment.value+"&type=2&order_type="+order_type.value
    // pay_result_src.value = pay_url.value
    // if(isFacebookBrowser()){
    //     window.open(pay_url.value)
    // }else if(!isWeb()){
    //     window.open(pay_url.value)
    // }else if(isDevice() == 'ios'){
    //     webkit.messageHandlers.reloadView.postMessage("https:"+pay_url.value);
    // }else if(isDevice() == 'android'){
    //     AndroidInterface.paly("https:"+pay_url.value);
    // } 
    if(payment.value == 'platform'){
        pay_url.value += '&game_id='+selectedGame.value
    }
    window.open(pay_url.value)
    setTimeout(() => {
        dialog_show.value = true //打开完成支付确认框
    }, 500);
    console.log(pay_url.value);
}


if(localStorage.getItem('lang') == 'zh'){
    pay_list_HMT.splice(2, 0,
        {
            pay_name:'Y幣',
            img_url:'https://www.yyfuns.com/static/logoZY.png',
            type:'platform'
        }
    )
    pay_list_Singapore.unshift( 
        {
            pay_name:'Y幣',
            img_url:'https://www.yyfuns.com/static/logoZY.png',
            type:'platform'
        }
    )
    pay_list_Malaysia.unshift( 
        {
            pay_name:'Y幣',
            img_url:'https://www.yyfuns.com/static/logoZY.png',
            type:'platform'
        }
    )
    pay_list.value.splice(2, 0,
        {
            pay_name:'Y幣',
            img_url:'https://www.yyfuns.com/static/logoZY.png',
            type:'platform'
        }
    )
    // setPayInfo('platform')
}

if(localStorage.getItem('lang') == 'en'){
    pay_list_HMT.splice(2, 0,
        {
            pay_name:'Y Coin',
            img_url:'https://www.yyfuns.com/static/logoZY_en.png',
            type:'platform'
        }
    )
    pay_list_Singapore.unshift( 
        {
            pay_name:'Y Coin',
            img_url:'https://www.yyfuns.com/static/logoZY_en.png',
            type:'platform'
        }
    )
    pay_list_Malaysia.unshift( 
        {
            pay_name:'Y Coin',
            img_url:'https://www.yyfuns.com/static/logoZY_en.png',
            type:'platform'
        }
    )
    pay_list.value.splice(2, 0,
        {
            pay_name:'Y Coin',
            img_url:'https://www.yyfuns.com/static/logoZY_en.png',
            type:'platform'
        }
    )
    // setPayInfo('platform')
}

const game_list = ref([])
const selectedGame = lang.value == 'zh' ? ref('選擇遊戲') : ref('Choose a game')
const getList = async () =>{
    const list = await axios.get('/gameList?limit=99')
    game_list.value = list.data.data
    console.log(game_list);
}
getList()

const servicesList = ref([])
const selectedServices = lang.value == 'zh' ? ref('選擇區服') : ref('Select game Server')
const select_game = async (e)=>{
    const res = await axios.get('servicesList?game_id='+e)
    servicesList.value = res.data
    selectedServices.value = selectedServicesTip.value
    selectedRole.value = selectedRoleTip.value
    roleList.value = []
    get_gameSkuList()
}


const roleList = ref([])
const selectedRole = lang.value == 'zh' ? ref('選擇角色') : ref('Choose a role')
const select_Services = async (e)=>{
    const res = await axios.get(`roleList?game_id=${selectedGame.value}&user_id=${userid}&server_id=${selectedServices.value}`)
    roleList.value = res.data
    selectedRole.value = selectedRoleTip.value
}

const chargeList = ref([])
const get_gameSkuList = async ()=>{
    const res = await axios.get('gameSkuList?game_id='+selectedGame.value)
    chargeList.value = res.data
    if(chargeList.value.length){
        select_price(chargeList.value[0].id,chargeList.value[0].currency,0,chargeList.value[0].amount,chargeList.value[0].sku)
    }
    
}

const selectedGameTip = lang.value == 'zh' ? ref('選擇遊戲') : ref('Choose a game')
const selectedServicesTip = lang.value == 'zh' ? ref('選擇區服') : ref('Select game Server')
const selectedRoleTip = lang.value == 'zh' ? ref('選擇角色') : ref('Choose a role')

</script>
  
<style lang="less" scoped>
.recharge-title {
    font-size: 25px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #fafafa;
    text-align: center;
    margin-bottom: 20px;
}
.recharge-content {
    min-height: 502px;
    .main{
        display: flex;
        .main_item{
            width: 90%;
            display: flex;
            align-items: center;
            margin-top: 15px;
            .select{
                width: 150px;
                height: 40px;
                margin-left: 10px;
            }
            p{
                font-size: 13px;
                margin-left: 20px;
            }
        }
    }

    .price{
        font-size: 50px;
        font-weight: bold;
        text-align: center;
    }
    .close {
        transform: scale(1.2);
        z-index: 999;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 40px;
        height: 40px;
        background-image: url();
    }
    .close:hover {
        cursor: pointer;
        background-image: url();
    }
    .recharge-content-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 13px;
        color: #4e4e4e;
        margin-top: 20px;
        margin-left: 20px;
        position: relative;
        span {
            font-size: 12px;
            color: #99a2aa;
        }
        p{
            color: red;
            display: inline-block;
            position: absolute;
            right: 50px;
            cursor: pointer;
            user-select: none;
            svg{
                position: relative;
                top: 1px;
            }
        }
        p:hover{
            text-decoration: underline;
        }
        .coupon_text{
            color: red !important;
            font-size: 15px !important;
        }
    }

    .pay-rechange-panel-box {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-flow: wrap;
        flex-flow: wrap;
        margin-top: 20px;

        .pay-rechange-item {
            margin-left: 45px;
            color: #222;
            box-sizing: border-box;
            border: 1px solid #e7ecf1;
            border-radius: 10px;
            height: 90px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            margin-right: 16px;
            margin-bottom: 16px;
            cursor: pointer;
            padding: 12px 0;
            width: 200px;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-pack: center;
            justify-content: center;
            position: relative;
            .bef{
                position: absolute;
                top: -1px;
                left: -1px;
                font-size: 12px;
                background-color: #3f956a;
                padding: 2px 10px;
                border-radius: 10px 0;
                color: white;
            }
            .pay-rechange-item-num {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: end;
                align-items: flex-end;

                .pay-rechange-item-num-title-1 {
                    font-size: 24px;
                }


            }

            .pay-rechange-item-bottom {
                margin-top: 5px;
                font-size: 14px;
                color: #757575;
            }
        }

        .pay-rechange-item-selected {
            border: 1px solid #3f956a;
            color: #3f956a;
            cursor: default;

            .pay-rechange-item-bottom {
                color: #3f956a;
            }
        }
    }

    .saveChoose-btn {
        span{
            margin-left: 20px;
        }
        .select-wrapper {
            position: relative;
            display: inline-block;
        }

        .select-wrapper select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-color: #f1f1f1;
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            color: #333;
            width: 120px;
        }

        .select-wrapper select:focus {
            outline: none;
        }

        .select-wrapper select option {
            background-color: white;
            color: #333;
        }

        .select-wrapper select::-ms-expand {
            display: none;
        }

        .arrow {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            pointer-events: none;
        }

        // .arrow::before {
        //     content: "";
        //     border-style: solid;
        //     border-width: 5px 5px 0 5px;
        //     border-color: #333 transparent transparent transparent;
        //     display: inline-block;
        //     vertical-align: middle;
        //     transform: translateY(-50%);
        // }

        .select-wrapper select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-color: transparent;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            font-size: 16px;
            color: #333;
        }

        .select-wrapper select:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
        }

        .select-wrapper select option {
            background-color: #fff;
            color: #333;
        }
        .saveChoose-middle{
            margin-top: 20px;
            .data_pay_method{
                display: grid;
                grid-template-columns: repeat(5, 1fr); /* 每行5个项目，1fr表示平均分配剩余空间 */
                gap: 10px; /* 项目之间的间隔 */
                li{
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    cursor: pointer;
                    padding: 10px;
                    border: 1px solid transparent;
                    border-radius: 12px;
                    width: 80px;
                    img{
                        width: 50px;
                        height: 50px;
                        // border-radius: 50%;
                    }
                    .add {
                        opacity: 1  ;
                        color: #fff;
                        background-color: red;
                        border-radius: 30px;
                        width: 35px;
                        text-align: center;
                        margin-top: 2px;
                        font-size: 12px;
                        padding: 2px 0px;
                        position: relative;
                        top: -8px;
                    }
                    .name{
                        text-align: center;
                        margin-top: 10px;
                    }
                }
                li:hover{
                    border: 1px solid #02a7e3;
                    
                }
                li.active{
                    background-color: #02a7e3;
                }
            }
        }
        .saveConfirm {
            padding: 24px;
            b{
                font-weight: 100;
            }
            button{
                background-color: #02a7e3;
                color: #fff;
                height: 44px;
                border: none;
                width: 100%;
                border-radius: 14px;
                cursor: pointer;
            }
            button:hover{
                background-color: rgba(#02a7e3, 0.7);
            }
        }
    }
    
}

.coupon{
    width: 400px;
    padding-bottom: 20px;
    border-radius: 12px;
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 99999;
    box-shadow: 1px 3px 10px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    .recharge_title {
        font-size: 23px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        text-align: center;
        margin-top: 5px;
        
    }
    .item{
        width: 82%;
        padding: 10px 0;
        background-color: #d4f3ff;
        border-radius: 10px;
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p{
            color: red;
            font-weight: bold;
        }
    }
    .button {
        // width: 100px;
        height: 38px;
        color: white;
        border: none;
        border-radius: 5px;
        background-color: #02a7e3;
        cursor: pointer;
        font-size: 17px;
        margin-top: 20px;
        padding: 0 10px;
    }
    .button:hover{
        animation: jello-horizontal 0.7s both;
    }
    .button:active{
        background-color: rgba(#02a7e3,.8);
    }
    .item_box{
        max-height: 400px;
        overflow: auto;
    }
}
.open{
  transform: translate(-50%, -50%) scale(1);
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.coupon_notUse{
    filter: grayscale(1);
    pointer-events: none;
}
.isPay{
    filter: grayscale(1);
    pointer-events: none;
}
</style>
  